import Vue from "vue"; //引入vue框架
import App from "./App.vue"; //页面的入口

Vue.config.productionTip = false; //在浏览器上调试面板中显示的提示语

// var a=1;
//过滤器，字母转大写
Vue.filter("toUp", (val) => {
  return val.toUpperCase();
});

//1、下载好了npm i router@3  版本路由
//2、引入
import VueRouter from "vue-router";
//3、注册组件路由
Vue.use(VueRouter);

//4、定义路由规则
let routes = [
  { /* 默认路由 */ path: "/", /* 重定向 */ redirect: "/find" },
  {
    /*一级 路由地址 */ path: "/find",
    /* 路由路径 */ component: () => import("./views/Find-a.vue"),
    /* 在嵌套路由中设置默认二级页面 redirect */ redirect: "/find/Ranking",
    /* 在一级路由中使用children 嵌套二级页面 */
    children: [
      {
        /* 定义二级路由规则（嵌套路由） */ path: "Ranking",
        /* 路由路径 */ component: () => import("./views/Second/Ranking-a.vue"),
      },
      {
        /* 定义二级路由规则（嵌套路由） */ path: "Recommend",
        /* 路由路径 */ component: () =>
          import("./views/Second/Recommend-b.vue"),
      },

      {
        /* 定义二级路由规则（嵌套路由） */ path: "SongList",
        /* 路由路径 */ component: () => import("./views/Second/SongList-c.vue"),
      },
    ],
  },
  {
    /*一级 路由地址 */ path: "/my",
    /* 路由路径 */ component: () => import("./views/My-b.vue"),
  },
];

//5、根据路由规则生成路由对象
let router = new VueRouter({
  routes /* 简写  routes: routes, */,
});
/* 
全局前置守卫：是路由跳转之前会触发的一个函数 

1、语法：router.beforeEach((to, form, next) =>{})
       to:指的是跳转目标路由的对象，里面包含path属性（路由地址）
       form：指的是跳转之前的路由对象（当前路由的对象）
       next（）：是一个函数 ，直接调用该函数 表示放行，直接进入目标路由页面
如果没有调用。则会阻止组件跳转路由页面

2、使用场景：作业面访问权判断
      当用户进入my的页面的时候，需要判断是否已经登陆 ，没有登陆的情况下，则不允许用户进入到这个页面



*/
let isLogin = false; //false 表示未登陆
router.beforeEach((to, form, next) => {
  /*   console.log(to);
  console.log(form, next); //打印查看*/
  if (to.path === "/my" && isLogin === false) {
    alert("阻止跳转🤷‍♀️ 未点击发现音乐"); //判断进入的页面为发现音乐，如果不是就弹框提示并且回到主页面
    next(false); //如果为点击我的音乐就传值false
  }
  next(); //点击了就放行表示通过
});

//实例化vue构造函数
new Vue({
  render: (h) => h(App), //渲染，这里绝对将来要显示什么内容
  //6、把路由对象设置在vue实例中
  //7、 设置挂载点  在根页面 <router-view> </router-view>
  router /* 简写  routes: routes, */,
}).$mount("#app"); //mount 挂载，决定了render里面的内容放到哪里去
